
{{-- 继承布局模板 --}}
@extends( 'mofa.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('mofa/css/video.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>视频专区-广州魔发科技有限公司,发型虚拟试戴</title>
@endsection


@section('content')
    <!-- 大海报 -->
    <section class="banner">


    </section>


    <section class="video" id="video">
        <!-- 导航 -->
        <div class="video-nav">
            <ul class="video-nav-list bym-wrapper bym-not-list">
                <li class="all-icon-li" >
                    <i class="icon">
                        <span class="all-icon"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/video/Product_spzq_cpgn_001.png" alt="">--}}
                    </i>
                    <a href="javascript:;" @click="changeType(0)"> 全部 </a>
                </li>
                <li class="promotion-icon-li">
                    <i class="icon">
                        <span class="promotion-icon"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/video/Product_spzq_cpgn_002.png" alt="">--}}
                    </i>
                    <a href="javascript:;" @click="changeType(1)"> 企业宣传 </a>
                </li>
                <li class="introduce-icon-li">
                    <i class="icon">
                        <span class="introduce-icon"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/video/Product_spzq_cpgn_003.png" alt="">--}}
                    </i>
                    <a href="javascript:;" @click="changeType(2)"> 产品介绍 </a>
                </li>
                <li class="case-icon-li">
                    <i class="icon">
                        <span class="case-icon"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/video/Product_spzq_cpgn_004.png" alt="">--}}
                    </i>
                    <a href="javascript:;" @click="changeType(3)"> 客户案例 </a>
                </li>
                <li class="tec-update-icon-li">
                    <i class="icon">
                        <span class="tec-update-icon"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/video/Product_spzq_cpgn_005.png" alt="">--}}
                    </i>
                    <a href="javascript:;" @click="changeType(4)"> 技术更新 </a>
                </li>
            </ul>
        </div>
        <!-- 导航 end -->
        <div class="video-content"  >
            <div class="bym-wrapper" v-show="!loading" >
                <!-- 内容列表 -->
                <ul class="video-contents bym-not-list clearfix" >
                    <li v-for="video in videos" >
                        <div class="video-content-cover">
                            <video controls="controls" v-bind:poster="video.preview_img" preload="none" ref="video">
                                <source :src="video.url" >
                                您的浏览器不支持 video 标签。
                            </video>
                            {{--<a :href="video.url" target="_blank" style="display: inline-block;width: 50px;height: 50px">shiping</a>--}}
                        </div>
                        <h3>@{{ video.name | textOverflow(20)  }}</h3>
                        <time v-text="video.created_at"> 2017/02/15 </time>
                    </li>
                </ul>

                <!-- 内容列表 end -->

                <!-- 分页 -->
                <bym-pagination v-if="videos.length  && !loading" v-on:change-page="changePage"
                                :total=paginate.last_page
                                :current="paginate.current_page"
                                :next="paginate.next_page_url"
                                :perv="paginate.prev_page_url"
                ></bym-pagination>

            </div>
            <div class="video-loading-info" v-show="loading">正在加载...</div>
            <div class="video-loading-info" v-show="!loading && !videos.length">没有视频数据</div>
        </div>



    </section>

    {{--分页插件模板--}}
    <script type="text/x-template" id="bym_pagination" >
        <ul class="bym-pagination">
            <li class="prev" v-if="current > 1"><a  href="javascript:;"  @click="clickHandle(current-1)">上一页</a></li>
            <li class="prev" v-else><a class="disable" href="javascript:;">上一页</a></li>
            <li v-for="index in pageList" >
                <template v-if="typeof index === 'number'" >
                    <a href="javascript:;" v-text="index" @click="clickHandle(index)" :class="[index === current ? 'active' :'']"></a>
                </template>
                <template v-else>
                    <a v-text="index" class="disable"></a>
                </template>
            </li>
            <li class="next" v-if="current < total"><a href="javascript:;" @click="clickHandle(current+1)" >下一页</a></li>
            <li class="next" v-else><a class="disable" href="javascript:;">下一页</a></li>
        </ul>
    </script>
@endsection

@section('script')
    <script type="text/javascript" src="{{asset('mofa/js/pagination.js')}}"></script>
    <script type="text/javascript" src="{{asset('mofa/js/video.js')}}"></script>

@endsection